<template>
  <view class="takeout">
    <div style="position: relative;z-index: 2;">
      <u-my-layOut  :navbarOption="{ bgColor: '#f6a5ac', leftText: activeIndex == 1 ? '帮我取' : activeIndex == 2 ? '帮我送' : '帮我买' }" :color="{ statusBarHeightColor: '#f6a5ac' }">
        <template v-slot:header>
          <!-- <div style="background: #f6a5ac" :style="{ height: `${statusBarHeight}px}` }"></div> -->
          <!-- <uv-navbar  :safeAreaInsetTop="false" leftIconSize="21px" leftIconColor="#0b0b0b"
           :titleStyle="{fontSize: '16px', lineHeight: '30px'}" :fixed="false" @leftClick="leftClick" 
           :leftText="activeIndex == 1 ? '帮我取' : activeIndex == 2 ? '帮我送' : '帮我买'" bgColor="rgba(255,255,255,0)" /> -->
        </template>
        <template v-slot:main>
           <div class="common-bg" ></div>
          <view class="page-body h100 oy pl30 pr30">
            <map :show-location="true" id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" covers="{{covers}}"></map>
            <div class="tab_list">
              <div @click="tabTap(item)" class="tab" :class="activeIndex === item.id ? 'active' + item.id : ''" v-for="(item, index) in tabList" :key="index">{{ item.title }}</div>
            </div>
            <div v-if="activeIndex === 1 || activeIndex === 2" class="form">
              <div class="cell">
                <div class="fac">
                  <div class="yuan">
                    <div class="dian" style="background-color: #333;"></div>
                  </div>
                  <div class="showText" v-if="form['type-Q-' + activeIndex] && form['type-Q-' + activeIndex].storey">
                    <div style="color: #333333;" class="text-1 fz34 single-line">{{ form['type-Q-' + activeIndex] &&
										form['type-Q-' + activeIndex].storey }} &nbsp; &nbsp;{{ form['type-Q-' + activeIndex].house_number
										}}
                    </div>
                    <div style="color: #ADADAE;" class="text-2  fz30 pt10  single-line">{{ form['type-Q-' + activeIndex] &&
										form['type-Q-' + activeIndex].name }} &nbsp; &nbsp;{{ form['type-Q-' + activeIndex] &&
											form['type-Q-' + activeIndex].tel }}</div>
                  </div>
                  <div v-else class="text ">填写取件地址</div>
                </div>
                <div @click="dzbTab('Q')" class="dzb p1755579751">地址簿</div>
              </div>
              <div class="cell cell1">
                <div class="fac">
                  <div class="yuan">
                    <div class="dian1" style="background-color: #DE0012;"></div>
                  </div>
                  <div class="showText" v-if="form['type-S-' + activeIndex] && form['type-S-' + activeIndex].storey">
                    <div style="color: #333333;" class="text-1 fz34 single-line">{{ form['type-S-' + activeIndex] &&

										form['type-S-' + activeIndex].storey }} &nbsp; &nbsp;{{ form['type-Q-' + activeIndex] &&
											form['type-S-'

												+ activeIndex].house_number }}</div>
                    <div style="color: #ADADAE;" class="text-2 fz30 pt10  single-line">{{ form['type-S-' + activeIndex] &&

										form['type-S-' + activeIndex].name }} &nbsp; &nbsp;{{ form['type-S-' + activeIndex] &&
											form['type-S-' +

										activeIndex].tel }}</div>
                  </div>
                  <div v-else class="text">填写收件地址</div>
                </div>
                <div @click="dzbTab('S')" class="dzb p1755579751">地址簿</div>
              </div>
            </div>
            <div v-if="activeIndex === 3" class="form">
              <div class="cell">
                <div class="fac">
                  <div class="yuan">
                    <div class="dian" style="background-color: #333;"></div>
                  </div>
                  <div @click="xdTap" class="text">描述想要的商品</div>
                </div>
              </div>
              <div class="cell cell1">
                <div class="fac">
                  <div class="yuan">
                    <div class="dian1" style="background-color: #DE0012;"></div>
                  </div>
                  <div class="showText" v-if="form['type-S-' + activeIndex] && form['type-S-' + activeIndex].storey">
                    <div style="color: #333333;" class="text-1 fz34 single-line">{{ form['type-S-' + activeIndex] &&

										form['type-S-' + activeIndex].storey }} &nbsp; &nbsp;{{ form['type-S-' + activeIndex] &&
											form['type-S-'

												+

										activeIndex].house_number }}</div>
                    <div style="color: #ADADAE;" class="text-2 fz30 pt10  single-line">{{ form['type-S-' + activeIndex] &&

										form['type-S-' + activeIndex].name }} &nbsp; &nbsp;{{ form['type-S-' + activeIndex] &&
											form['type-S-' +

										activeIndex].tel }}</div>
                  </div>
                  <div v-else class="text">填写收件地址</div>
                </div>
                <div @click="dzbTab('S')" class="dzb p1755579751">地址簿</div>
              </div>
            </div>
            <div @click="xdTap" class="qu_xia_dan">去下单</div>

            <!-- <view class="btn-area">

<button @click="getCenterLocation" class="page-body-button" type="primary">获取位置</button>

<button @click="moveToLocation" class="page-body-button" type="primary">移动位置</button>

<button @click="translateMarker" class="page-body-button" type="primary">移动标注</button>

<button @click="includePoints" class="page-body-button" type="primary">缩放视野展示所有经纬度</button>

</view> -->
          </view>
        </template>
        <template v-slot:footer>

        </template>
      </u-my-layOut>
    </div>
  </view>
</template>

<script>
let baseUrl = "https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812";
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    "u-my-layOut": myLayOutVue,
  },
  data() {
    return {
      routeQuery: {},
      form: {},
      ZForm: {},
      tabList: [{
        id: 1,
        title: '帮我取',
        active: baseUrl + '/30bc7202508121700065491.png'
      },
      {
        id: 2,
        title: '帮我送',
        active: baseUrl + '/7d199202508121659451846.png'
      },
      {
        id: 3,
        title: '帮我买',
        active: baseUrl + '/7d199202508121659451846.png'
      },
      ],
      activeIndex: 1,
      latitude: 32.016627,
      longitude: 120.269009,
      markers: [],
      covers: [],
      statusBarHeight: 0
    }

  },
  onLoad(options) {
    if (options) this.routeQuery = options
    if (this.routeQuery.type) this.activeIndex = Number(this.routeQuery.type)
    uni.getStorage({
      key: 'dzb',
      success: res => {
        if (res.data) this.form = JSON.parse(res.data)
      }
    });
  },
  onShow() {
  
    uni.removeStorage({
      key: 'typeForm'
    });
    uni.getStorage({
      key: 'dzb',
      success: res => {
        if (res.data) this.form = JSON.parse(res.data)
      }
    });
  },
  onReady(e) {
    // this.mapCtx = wx.createMapContext('myMap')
    // this.mapCtx.moveToLocation()
    let res = uni.getWindowInfo();
    let menuButtonInfo = {}
    /* #ifndef H5 */
    uni.getMenuButtonBoundingClientRect();
    /* #endif */
    if (res.statusBarHeight == 0) {
      this.statusBarHeight = menuButtonInfo.top;
    } else {
      this.statusBarHeight = res.statusBarHeight
    }
  },
  methods: {
    leftClick() {
      uni.navigateBack({
        delta: getCurrentPages().length
      });
    },
    dzbTab(item) {
      uni.navigateTo({
        url: '/pages-user/address?type=' + this.activeIndex + '&dzb=' + item
      });

    },
    xdTap() {
      if (this.activeIndex == 3) {
        wx.navigateTo({
          url: '/pages-worker/checkout/buy?type=' + this.activeIndex
        });
        return
      }
      wx.navigateTo({
        url: '/pages-worker/checkout/fetch?type=' + this.activeIndex
      });

    },
    tabTap(item) {
      if (item.id === this.activeIndex) return
      this.activeIndex = item.id

    },
    getCenterLocation: function () {
      this.mapCtx.getCenterLocation({
        success: function (res) {
        }
      })
    },
    moveToLocation: function () {
      this.mapCtx.moveToLocation()
    },
    translateMarker: function () {
      this.mapCtx.translateMarker({
        markerId: 1,
        autoRotate: true,
        duration: 1000,
        destination: {
          latitude: 23.10229,
          longitude: 113.3345211,
        },
        animationEnd() {
        }
      })
    },
    includePoints: function () {
      this.mapCtx.includePoints({
        padding: [10],
        points: [{
          latitude: 23.10229,
          longitude: 113.3345211,
        }, {
          latitude: 23.00229,
          longitude: 113.3345211,
        }]
      })
    }
  }

}
</script>

<style lang="scss" scoped>
@import "./common.scss";

#myMap {
  height: 480rpx;
  width: calc(100% - 10rpx);
  margin: 30rpx auto 0 auto;
  z-index: 2;
  border-top: 4rpx solid #fff;
  border-left: 4rpx solid #fff;
  border-right: 4rpx solid #fff;
  border-radius: 20rpx 20rpx 0 0;
}

.takeout {
  position: relative;
  .showText {
    padding-left: 30rpx;
    width: 60vw;
    box-sizing: border-box;
  }

  .tab_list {
    background-color: #f7f5f8;
    height: 80rpx;
    line-height: 90rpx;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;

    .tab:nth-child(1) {
      text-indent: -30rpx;
    }

    .tab {
      width: 25%;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      height: 80rpx;
      text-align: center;
    }

    .active1 {
      font-weight: bold;
      font-size: 32rpx;
      background: url("https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/30bc7202508121700065491.png")
        no-repeat center center;
      background-size: 100% 100% !important;
    }

    .active3,
    .active2 {
      font-weight: bold;
      font-size: 32rpx;
      background: url("https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0812/7d199202508121659451846.png")
        no-repeat center center;
      background-size: 100% 100% !important;
    }
  }

  .form {
    background-color: #fff;
    padding-top: 40rpx;
    position: relative;
    z-index: 5;

    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 120rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
    }

    .cell1 {
      background: #ffffff;
      box-shadow: 1rpx -8rpx 34rpx 0rpx rgba(237, 235, 235, 0.75);
      border: 2rpx solid #f7f5f8;
    }

    .yuan {
      width: 40rpx;
      min-height: 40rpx;
      background: #ffffff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3rpx 4rpx #ccc;

      .dian,
      .dian1 {
        min-width: 25rpx;
        min-height: 25rpx;
        width: 25rpx;
        height: 25rpx;
        overflow: hidden;
        border-radius: 50%;
      }
    }

    .text {
      font-weight: 600;
      font-size: 38rpx;
      color: #333333;
      padding-left: 30rpx;
    }
  }

  .qu_xia_dan {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background: #de0012;
    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
    border-radius: 50rpx;
    margin-top: 40rpx;
  }

  .bg {
    top: 0;
    left: 0;
    position: absolute;
    min-height: 44vh;
    z-index: 1;
  }

  .box {
    padding: 10rpx;
    padding-bottom: 0;
    border-radius: 20rpx 20rpx 0 0;
  }

  .map {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
  }

  .tabs {
    position: relative;
    margin-top: -50rpx;
    flex-direction: row;
    background-color: #f7f5f8;
    border-radius: 30rpx 30rpx 0 0;

    .item {
      width: 160rpx;
      height: 90rpx;
      position: relative;
      align-items: center;
      justify-content: center;

      .tx {
        color: #333333;
        font-size: 30rpx;
        position: relative;
      }
    }

    .active {
      .tx {
        font-weight: bold;
      }
    }

    .active1 {
      left: 0;
      bottom: 0;
      height: 90rpx;
      position: absolute;
      border-radius: 30rpx 0 0 0;
    }

    .active2 {
      bottom: 0;
      left: 130rpx;
      height: 90rpx;
      position: absolute;
    }

    .active3 {
      bottom: 0;
      left: 290rpx;
      height: 90rpx;
      position: absolute;
    }
  }

  .btn {
    height: 90rpx;
    margin: 0 30rpx;
    margin-top: 60rpx;
    border-radius: 100rpx;
    background-color: #cb2b24;

    .tx {
      color: #fff;
      font-size: 30rpx;
    }
  }
}
</style>
